import { lazy } from "react";
import { useRoutes } from "react-router-dom";

// import Home from "../pages/Home";
// import Pins from "../pages/Pins";
// import Course from "../pages/Course";

// import New from "../pages/Pins/components/New";
// import Hot from "../pages/Pins/components/Hot";
// import Following from "../pages/Pins/components/Following";

// import Search from "../pages/Home/components/Search";
// import Params from "../pages/Home/components/Params";
// import State from "../pages/Home/components/State";

/*
  路由懒加载：
    1. 代码分割：将路由组件单独打包成一个js文件
    2. 按需加载：当用户访问某个路由时，才会加载对应js文件
*/
const Home = lazy(() => import("../pages/Home"));
const Pins = lazy(() => import("../pages/Pins"));
const Course = lazy(() => import("../pages/Course"));

const New = lazy(() => import("../pages/Pins/components/New"));
const Hot = lazy(() => import("../pages/Pins/components/Hot"));
const Following = lazy(() => import("../pages/Pins/components/Following"));

const Search = lazy(() => import("../pages/Home/components/Search"));
const Params = lazy(() => import("../pages/Home/components/Params"));
const State = lazy(() => import("../pages/Home/components/State"));

// 路由配置项
const routes = [
  {
    path: "/",
    element: <Home />,
    children: [
      {
        // 普通路由路径 -> 1 对 1
        path: "/search",
        element: <Search />,
      },
      {
        // 特殊路由路径 : -> 多 对 1
        path: "/params/:id", // 路径占位符，占位的内容就是params参数
        element: <Params />,
      },
      {
        path: "/state",
        element: <State />,
      },
    ],
  },
  {
    path: "/pins",
    element: <Pins />,
    children: [
      {
        path: "/pins/new",
        element: <New />,
      },
      {
        path: "/pins/hot",
        element: <Hot />,
      },
      {
        path: "/pins/following",
        element: <Following />,
      },
    ],
  },
  {
    path: "/course",
    element: <Course />,
  },
];

// 一个文件是可以包含默认暴露、分别暴露和统一暴露的，只是默认暴露只能有一次。

// 渲染路由的方法（首字母需大写）
export const RenderRoutes = () => {
  // useRoutes 接受路由配置项作为参数。返回值是组件（由Routes和Route组成的组件）
  return useRoutes(routes);
};

export default routes;
